<template>
  <view class="container">
    <canvas canvas-id="snow-canvas" class="snow-canvas"></canvas>
    <!-- 顶部导航 -->
    <view class="header">
      <view class="user-info">
        <image class="avatar" :src="chatUser.avatar||'/static/default_avatar.jpg'"></image>
        <view class="info-text">
          <text class="name">{{ chatUser.name }}</text>
          <text class="status">{{ chatUser.status }}</text>
        </view>
      </view>
      <view class="header-actions">
        <image src="/static/phone.png" @click="startVoiceCall"></image>
        <image src="/static/video.png" @click="startVideoCall"></image>
      </view>
    </view>
    
    <!-- 聊天内容区域 -->
    <scroll-view 
      scroll-y 
      :scroll-into-view="scrollToMsgId"
      :scroll-with-animation="true"
      class="chat-scroll"
      @scrolltolower="loadMoreHistory"
    >
      <view class="chat-content">
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="hasMoreHistory" @click="loadMoreHistory">
          <text>加载更多消息</text>
        </view>
        
        <!-- 时间提示 -->
        <view class="time-tip" v-if="showTimeTip">{{ currentTime }}</view>
        
        <!-- 接收的消息 -->
        <view 
          class="message-item received" 
          v-for="(msg, index) in messageList" 
          :key="msg.id"
          :id="msg.id"
          :class="{ 'show-time': needShowTime(index), 'first-in-group': isFirstInGroup(index) }"
        >
          <image class="avatar" :src="chatUser.avatar||'/static/default_avatar.jpg'" v-if="isFirstInGroup(index)"></image>
          <view class="avatar-placeholder" v-else></view>
          <view class="message-content">
            <view class="message-bubble" :class="{ 
              'is-text': msg.type === 'text',
              'is-image': msg.type === 'image',
              'love-letter': msg.type === 'love-letter'
            }">
              <text v-if="msg.type === 'text'">{{ msg.content }}</text>
              <image v-else-if="msg.type === 'image'" :src="msg.content" mode="widthFix" @click="previewImage(msg.content)"></image>
              <view v-else-if="msg.type === 'love-letter'" class="letter-content">
                <text class="letter-title">来自{{ chatUser.name }}的情书</text>
                <text class="letter-text">{{ msg.content }}</text>
                <view class="heart-icon">❤️</view>
              </view>
            </view>
            <text class="message-time" v-if="needShowTime(index)">{{ formatTime(msg.time) }}</text>
          </view>
        </view>
        
        <!-- 发送的消息 -->
        <view 
          class="message-item sent" 
          v-for="(msg, index) in myMessageList" 
          :key="msg.id"
          :id="msg.id"
          :class="{ 'show-time': needShowTime(index, true), 'first-in-group': isFirstInGroup(index, true) }"
        >
          <view class="message-content">
            <view class="message-bubble" :class="{ 
              'is-text': msg.type === 'text',
              'is-image': msg.type === 'image',
              'love-letter': msg.type === 'love-letter'
            }">
              <text v-if="msg.type === 'text'">{{ msg.content }}</text>
              <image v-else-if="msg.type === 'image'" :src="msg.content" mode="widthFix" @click="previewImage(msg.content)"></image>
              <view v-else-if="msg.type === 'love-letter'" class="letter-content">
                <text class="letter-title">给{{ chatUser.name }}的情书</text>
                <text class="letter-text">{{ msg.content }}</text>
                <view class="heart-icon">❤️</view>
              </view>
            </view>
            <text class="message-time" v-if="needShowTime(index, true)">{{ formatTime(msg.time) }}</text>
          </view>
          <image class="avatar" :src="myAvatar" v-if="isFirstInGroup(index, true)"></image>
          <view class="avatar-placeholder" v-else></view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view class="input-area">
      <view class="input-tools">
        <image src="/static/emoji.png" @click="toggleEmojiPanel"></image>
        <image src="/static/image.png" @click="selectImage"></image>
        <image src="/static/love.png" @click="showLoveLetterDialog"></image>
      </view>
      <view class="input-box">
        <input 
          type="text" 
          placeholder="输入消息..." 
          v-model="inputText"
          :focus="inputFocused"
          @confirm="sendMessage"
          @focus="hideEmojiPanel"
          adjust-position
        >
      </view>
      <view class="send-btn-container" style="padding-right: 25rpx;">
        <view class="send-btn" @click="sendMessage" :class="{ disabled: !inputText.trim() }">
          <text>发送</text>
        </view>
      </view>
      
      <!-- 表情面板 -->
      <view class="emoji-panel" v-if="showEmojiPanel">
        <scroll-view scroll-y >
          <view class="emoji-scroll">
			  <view class="emoji-row" v-for="(row, i) in emojiList" :key="i">
			    <view 
			      class="emoji-item" 
			      v-for="(emoji, j) in row" 
			      :key="j"
			      @click="insertEmoji(emoji)"
			    >
			      {{ emoji }}
			    </view>
			  </view>
		  </view>
        </scroll-view>
      </view>
    </view>

    <!-- 情书弹窗 -->
    <view class="love-letter-modal" v-if="showLoveLetterModal">
      <view class="modal-mask" @click="closeLoveLetterModal"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">写情书</text>
          <image src="/static/close.png" @click="closeLoveLetterModal"></image>
        </view>
        <textarea 
          class="letter-textarea" 
          placeholder="写下你的心意..." 
          v-model="loveLetterContent"
          auto-height
          maxlength="200"
          placeholder-class="placeholder"
        ></textarea>
        <view class="word-count">{{ loveLetterContent.length }}/200</view>
        <view class="modal-footer">
          <button class="cancel-btn" @click="closeLoveLetterModal">取消</button>
          <button class="send-letter-btn" @click="sendLoveLetter">发送情书</button>
        </view>
      </view>
    </view>
    
    <!-- 消息菜单 -->
    <view class="message-menu" v-if="showMessageMenu" @touchmove.stop.prevent>
      <view class="menu-item" @click="copyMessage">复制</view>
      <view class="menu-item" @click="deleteMessage">删除</view>
      <view class="menu-item" @click="recallMessage">撤回</view>
      <view class="menu-triangle"></view>
    </view>
  </view>
</template>

<script>
const emojis = [
  "😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇",
  "🙂", "🙃", "😉", "😌", "😍", "🥰", "😘", "😗", "😙", "😚",
  "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", 
  "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️",
  "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡",
  "🤬", "🤯", "😳", "🥵", "🥶", "😱", "😨", "😰", "😥", "😓",
  "🤗", "🤔", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄",
  "😯", "😦", "😧", "😮", "😲", "🥱", "😴", "🤤", "😪", "😵",
  "🤐", "🥴", "🤢", "🤮", "🤧", "😷", "🤒", "🤕", "🤑", "🤠",
  "😈", "👿", "👹", "👺", "🤡", "💩", "👻", "💀", "☠️", "👽",
  "👾", "🤖", "🎃", "😺", "😸", "😹", "😻", "😼", "😽", "🙀",
  "😿", "😾", "❤️", "🧡", "💛", "💚", "💙", "💜", "🤎", "🖤",
  "🤍", "💔", "💕", "💖", "💗", "💘", "💝", "💞", "💟", "❣️"
];

export default {
  data() {
    return {
      chatUser: {
        id: 1,
        name: "林小夏",
        avatar: "/static/default_avatar.jpg",
        status: "在线"
      },
      myAvatar: "/static/default_avatar.jpg",
      messageList: [
        {
          id: "msg1",
          type: "text",
          content: "嗨，今天过得怎么样？",
          time: this.getCurrentTime(-15)
        },
        {
          id: "msg2",
          type: "text",
          content: "我刚看完一本很棒的书，推荐给你哦~",
          time: this.getCurrentTime(-10)
        },
        {
          id: "msg3",
          type: "image",
          content: "/static/book.jpg",
          time: this.getCurrentTime(-8)
        }
      ],
      myMessageList: [
        {
          id: "mymsg1",
          type: "text",
          content: "我也挺好的，在图书馆复习呢",
          time: this.getCurrentTime(-12)
        },
        {
          id: "mymsg2",
          type: "text",
          content: "什么书呀？发来看看",
          time: this.getCurrentTime(-9)
        }
      ],
      inputText: "",
      inputFocused: false,
      scrollToMsgId: "",
      showLoveLetterModal: false,
      loveLetterContent: "",
      showTimeTip: true,
      currentTime: this.formatFullTime(new Date()),
      showEmojiPanel: false,
      emojiList: this.chunkArray(emojis, 8),
      hasMoreHistory: true,
      showMessageMenu: false,
      selectedMessage: null,
      menuPosition: { top: 0, left: 0 }
    };
  },
  onLoad() {
    this.scrollToBottom();
    this.initMockTyping();
  },
  onReady() {
    this.initSnowEffect();
  },
  methods: {
    initSnowEffect() {
      const sys = uni.getSystemInfoSync();
      const W = sys.windowWidth;
      const H = sys.windowHeight;
      const ctx = uni.createCanvasContext('snow-canvas', this);
      const snowflakes = Array.from({
        length: 35
      }, () => ({
        x: Math.random() * W,
        y: Math.random() * H,
        r: Math.random() * 2.5 + 1,
        d: Math.random() * 1.5 + 0.5
      }));
    
      const draw = () => {
        ctx.clearRect(0, 0, W, H);
        ctx.setFillStyle('rgba(255,255,255,0.8)');
        ctx.beginPath();
        snowflakes.forEach(flake => {
          ctx.moveTo(flake.x, flake.y);
          ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2);
        });
        ctx.fill();
        snowflakes.forEach(flake => {
          flake.y += flake.d;
          flake.x += Math.sin(flake.y / 30) * 0.6;
          if (flake.y > H) {
            flake.y = 0;
            flake.x = Math.random() * W;
          }
        });
        ctx.draw();
        // #ifdef H5
        requestAnimationFrame(draw);
        // #endif
        // #ifdef MP-WEIXIN
        setTimeout(draw, 1000 / 60);
        // #endif
      };
      draw();
    },
    
    // 初始化模拟对方正在输入效果
    initMockTyping() {
      setInterval(() => {
        if (Math.random() > 0.7 && this.chatUser.status === "在线") {
          this.chatUser.status = "对方正在输入...";
          setTimeout(() => {
            this.chatUser.status = "在线";
            if (Math.random() > 0.3) {
              this.receiveRandomMessage();
            }
          }, 2000 + Math.random() * 3000);
        }
      }, 10000);
    },
    
    // 接收随机消息
    receiveRandomMessage() {
      const types = ['text', 'text', 'text', 'image'];
      const type = types[Math.floor(Math.random() * types.length)];
      
      let content = '';
      if (type === 'text') {
        content = this.getRandomReply();
      } else {
        content = `/static/random${Math.floor(Math.random() * 3) + 1}.jpg`;
      }
      
      const newMsg = {
        id: `msg${this.messageList.length + 1}`,
        type: type,
        content: content,
        time: this.getCurrentTime()
      };
      
      this.messageList.push(newMsg);
      this.scrollToMsgId = newMsg.id;
    },
    
    // 分块数组用于表情面板
    chunkArray(arr, size) {
      return Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
        arr.slice(i * size, i * size + size)
      );
    },
    
    // 格式化时间
    formatTime(time) {
      const now = new Date();
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const msgDate = new Date(time);
      
      if (msgDate > today) {
        // 今天
        return msgDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      } else if (msgDate > new Date(today - 86400000)) {
        // 昨天
        return '昨天 ' + msgDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      } else {
        // 更早
        return msgDate.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + 
               msgDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      }
    },
    
    // 格式化完整时间
    formatFullTime(date) {
      const options = { 
        year: 'numeric', 
        month: 'long', 
        day: 'numeric', 
        hour: '2-digit', 
        minute: '2-digit' 
      };
      return date.toLocaleDateString('zh-CN', options);
    },
    
    // 判断是否需要显示时间
    needShowTime(index, isMine = false) {
      const list = isMine ? this.myMessageList : this.messageList;
      if (index === 0) return true;
      
      const currentTime = new Date(list[index].time);
      const prevTime = new Date(list[index - 1].time);
      const timeDiff = (currentTime - prevTime) / (1000 * 60); // 分钟差
      
      return timeDiff > 5;
    },
    
    // 判断是否是群组中的第一条消息
    isFirstInGroup(index, isMine = false) {
      const list = isMine ? this.myMessageList : this.messageList;
      if (index === 0) return true;
      
      const currentTime = new Date(list[index].time);
      const prevTime = new Date(list[index - 1].time);
      const timeDiff = (currentTime - prevTime) / (1000 * 60); // 分钟差
      
      return timeDiff > 3 || list[index - 1].type !== list[index].type;
    },
    
    // 获取当前时间（可偏移）
    getCurrentTime(offsetMinutes = 0) {
      const now = new Date();
      now.setMinutes(now.getMinutes() + offsetMinutes);
      return now.toISOString();
    },
    
    // 获取随机回复
    getRandomReply() {
      const replies = [
        "嗯嗯，我明白了~",
        "真的吗？好有趣！",
        "哈哈，太有意思了 😄",
        "我也这么觉得",
        "下次一起去吧",
        "你吃饭了吗？",
        "今天天气真好",
        "我刚看到一只可爱的小猫 🐱",
        "周末有什么计划吗？",
        "最近在听什么歌？推荐一下",
        "这个表情好可爱 → 😊",
        "我在想你 ❤️",
        "晚安，做个好梦 🌙"
      ];
      return replies[Math.floor(Math.random() * replies.length)];
    },
    
    // 滚动到底部
    scrollToBottom() {
     if (this.myMessageList.length > 0) {
           const lastMsgId = this.myMessageList[this.myMessageList.length - 1].id;
           this.scrollToMsgId = lastMsgId;
         } else if (this.messageList.length > 0) {
           const lastMsgId = this.messageList[this.messageList.length - 1].id;
           this.scrollToMsgId = lastMsgId;
         }
         
         // 添加平滑滚动效果
         this.$nextTick(() => {
           const query = uni.createSelectorQuery().in(this);
           query.select('.chat-scroll').boundingClientRect();
           query.selectViewport().scrollOffset();
           query.exec((res) => {
             if (res[0]) {
               uni.pageScrollTo({
                 scrollTop: res[0].bottom,
                 // duration: 300
               });
             }
           });
         });
    },
    
    // 发送消息
    sendMessage() {
      if (!this.inputText.trim()) {
        this.startVoiceCall();
        return;
      }
      
      const newMsg = {
        id: `mymsg${Date.now()}`,
        type: "text",
        content: this.inputText,
        time: this.getCurrentTime()
      };
      
      this.myMessageList.push(newMsg);
      this.inputText = "";
      this.scrollToBottom();
      this.hideEmojiPanel();
      
      // 模拟回复
      if (this.chatUser.status === "在线") {
        setTimeout(() => {
          this.receiveRandomMessage();
        }, 1000 + Math.random() * 2000);
      }
    },
    
    // 显示情书对话框
    showLoveLetterDialog() {
      this.showLoveLetterModal = true;
      this.inputFocused = false;
      this.hideEmojiPanel();
    },
    
    // 关闭情书对话框
    closeLoveLetterModal() {
      this.showLoveLetterModal = false;
      this.loveLetterContent = "";
    },
    
    // 发送情书
    async sendLoveLetter() {
      if (!this.loveLetterContent.trim()) {
        uni.showToast({
          title: '情书内容不能为空',
          icon: 'none'
        });
        return;
      }
      
      const newMsg = {
        id: `mymsg${Date.now()}`,
        type: "love-letter",
        content: this.loveLetterContent,
        time: this.getCurrentTime()
      };
      
      this.myMessageList.push(newMsg);
      this.showLoveLetterModal = false;
      this.loveLetterContent = "";
      this.scrollToBottom();
      const res = await this.$api.post('/LoveLetter/send',)
	  if(res.data.code === 200) {
		  
	  }
      // 模拟对方收到情书的回复
      setTimeout(() => {
        const replyMsg = {
          id: `msg${Date.now()}`,
          type: "text",
          content: "我收到你的情书了...好感动 ❤️",
          time: this.getCurrentTime()
        };
        this.messageList.push(replyMsg);
        this.scrollToBottom();
      }, 2000);
    },
    
	// 选择头像
	async chooseAvatar() {
	  uni.chooseImage({
	    count: 1,
	    success:  (res)  => {
	      const tempFilePaths = res.tempFilePaths;
		  this.$api.uploadFile('/upload/File',tempFilePaths[0]).then(res => {
		   this.form.avatar = res.data.cosUrl;
		  })
	    }
	  });
	},
    // 选择图片
    selectImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          
          const tempFilePaths = res.tempFilePaths;
          this.$api.uploadFile('/upload/File',tempFilePaths[0]).then(res => {
		     const newMsg = {
			   id: `mymsg${Date.now()}`,
			   type: "image",
			   content: res.data.cosUrl,
			   time: this.getCurrentTime()
			 };
			 
			 this.myMessageList.push(newMsg);
			 this.scrollToBottom();
          })
          // 模拟对方看到图片后的回复
          setTimeout(() => {
            const replyMsg = {
              id: `msg${Date.now()}`,
              type: "text",
              content: "照片拍得真好看！",
              time: this.getCurrentTime()
            };
            this.messageList.push(replyMsg);
            this.scrollToBottom();
          }, 2000);
        }
      });
    },
    
    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: 0
      });
    },
    
    // 开始视频通话
    startVideoCall() {
      uni.showModal({
        title: '视频通话',
        content: '正在发起视频通话...',
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/video-call/index'
            });
          }
        }
      });
    },
    
    // 开始语音通话
    startVoiceCall() {
      uni.showModal({
        title: '语音通话',
        content: '正在发起语音通话...',
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/voice-call/index'
            });
          }
        }
      });
    },
    
    // 加载更多历史消息
    loadMoreHistory() {
      if (!this.hasMoreHistory) return;
      
      uni.showLoading({
        title: '加载中...'
      });
      
      setTimeout(() => {
        const newHistory = [
          {
            id: `msg${Date.now() - 100000000}`,
            type: "text",
            content: "这是更早的历史消息",
            time: this.getCurrentTime(-60)
          },
          {
            id: `mymsg${Date.now() - 100000000}`,
            type: "text",
            content: "我之前发的消息",
            time: this.getCurrentTime(-65)
          }
        ];
        
        this.messageList.unshift(...newHistory);
        uni.hideLoading();
        
        // 模拟没有更多历史消息
        if (this.messageList.length > 10) {
          this.hasMoreHistory = false;
        }
      }, 1000);
    },
    
    // 显示/隐藏表情面板
    toggleEmojiPanel() {
      this.showEmojiPanel = !this.showEmojiPanel;
      if (this.showEmojiPanel) {
        this.inputFocused = false;
      }
    },
    
    hideEmojiPanel() {
      this.showEmojiPanel = false;
    },
    
    // 插入表情
    insertEmoji(emoji) {
      this.inputText += emoji;
    },
    
    // 长按消息显示菜单
    showMessageMenus(message, isMine, event) {
      this.selectedMessage = { message, isMine };
      this.showMessageMenu = true;
      
      // 计算菜单位置
      const { top, left } = event.touches[0];
      this.menuPosition = {
        top: top - 120 + 'px',
        left: left - 50 + 'px'
      };
      
      // 3秒后自动隐藏
      setTimeout(() => {
        this.showMessageMenu = false;
      }, 3000);
    },
    
    // 复制消息
    copyMessage() {
      uni.setClipboardData({
        data: this.selectedMessage.message.content,
        success: () => {
          uni.showToast({
            title: '已复制',
            icon: 'success'
          });
          this.showMessageMenu = false;
        }
      });
    },
    
    // 删除消息
    deleteMessage() {
      uni.showModal({
        title: '删除消息',
        content: '确定要删除这条消息吗？',
        success: (res) => {
          if (res.confirm) {
            const list = this.selectedMessage.isMine ? this.myMessageList : this.messageList;
            const index = list.findIndex(msg => msg.id === this.selectedMessage.message.id);
            if (index !== -1) {
              list.splice(index, 1);
            }
            this.showMessageMenu = false;
          }
        }
      });
    },
    
    // 撤回消息
    recallMessage() {
      if (!this.selectedMessage.isMine) {
        uni.showToast({
          title: '只能撤回自己的消息',
          icon: 'none'
        });
        return;
      }
      
      const now = new Date();
      const msgTime = new Date(this.selectedMessage.message.time);
      const diffMinutes = (now - msgTime) / (1000 * 60);
      
      if (diffMinutes > 2) {
        uni.showToast({
          title: '超过2分钟不能撤回',
          icon: 'none'
        });
        return;
      }
      
      const list = this.myMessageList;
      const index = list.findIndex(msg => msg.id === this.selectedMessage.message.id);
      if (index !== -1) {
        list[index].content = '你撤回了一条消息';
        list[index].recalled = true;
      }
      this.showMessageMenu = false;
    }
  }
};
</script>

<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.snow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.header {
  height: 120rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 10;
  
  .user-info {
    flex: 1;
    display: flex;
    align-items: center;
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
      border: 1rpx solid #f0f0f0;
    }
    
    .info-text {
      display: flex;
      flex-direction: column;
    }
    
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .status {
      font-size: 24rpx;
      color: #666;
      margin-top: 6rpx;
    }
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    
    image {
      width: 48rpx;
      height: 48rpx;
      margin-left: 30rpx;
    }
  }
}

.chat-scroll {
  flex: 1;
  height: 1px; // 修复scroll-view在部分平台的问题
  overflow-anchor: auto; /* 启用滚动锚定，使内容自动保持在底部 */
}

.chat-content {
  padding: 24rpx;
  padding-bottom: 160rpx; // 为输入区域留出空间
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 26rpx;
}

.time-tip {
  text-align: center;
  margin: 24rpx 0;
  
  text {
    background-color: rgba(0, 0, 0, 0.1);
    color: #666;
    font-size: 24rpx;
    padding: 6rpx 24rpx;
    border-radius: 20rpx;
  }
}

.message-item {
  display: flex;
  margin-bottom: 12rpx;
  align-items: flex-start;
  transition: all 0.3s;
  
  &.received {
    justify-content: flex-start;
    
    .message-content {
      align-items: flex-start;
    }
  }
  
  &.sent {
    justify-content: flex-end;
    
    .message-content {
      align-items: flex-end;
    }
  }
  
  .avatar {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    border: 1rpx solid #f0f0f0;
    flex-shrink: 0;
  }
  
  .avatar-placeholder {
    width: 72rpx;
    flex-shrink: 0;
  }
  
  .message-content {
    max-width: 70%;
    margin: 0 20rpx;
    display: flex;
    flex-direction: column;
  }
  
  .message-bubble {
    position: relative;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    font-size: 30rpx;
    line-height: 1.5;
    word-break: break-word;
    
    &.is-text {
      min-width: 80rpx;
    }
    
    &.is-image {
      padding: 0;
      overflow: hidden;
      
      image {
        max-width: 300rpx;
        max-height: 400rpx;
        display: block;
      }
    }
    
    &.love-letter {
      background: linear-gradient(135deg, #fff0f0, #fff9f0);
      border: 1rpx solid #ffdddd;
      box-shadow: 0 4rpx 12rpx rgba(255, 100, 100, 0.1);
    }
  }
  
  &.received .message-bubble {
    background-color: #fff;
    color: #333;
    border: 1rpx solid #eee;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    &.is-text:not(.first-in-group)::before {
      content: '';
      position: absolute;
      top: 16rpx;
      left: -12rpx;
      width: 0;
      height: 0;
      border-top: 8rpx solid transparent;
      border-bottom: 8rpx solid transparent;
      border-right: 12rpx solid #fff;
    }
  }
  
  &.sent .message-bubble {
    background-color: #ff6600;
    color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(255, 102, 0, 0.2);
    
    &.is-text:not(.first-in-group)::after {
      content: '';
      position: absolute;
      top: 16rpx;
      right: -12rpx;
      width: 0;
      height: 0;
      border-top: 8rpx solid transparent;
      border-bottom: 8rpx solid transparent;
      border-left: 12rpx solid #ff6600;
    }
  }
  
  .message-time {
    font-size: 22rpx;
    color: #999;
    text-align: center;
    width: 100%;
    display: block;
    margin: 8rpx 0;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  &.show-time .message-time {
    opacity: 1;
  }
  
  &:not(.first-in-group) {
    margin-top: -8rpx;
  }
  
  &.first-in-group {
    margin-top: 20rpx;
  }
  
  
  
  
  
  &.show-time .message-time {
    opacity: 1;
  }
  
  .letter-content {
    display: flex;
    flex-direction: column;
    
    .letter-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #ff6600;
      margin-bottom: 16rpx;
    }
    
    .letter-text {
      font-size: 26rpx;
      color: #333;
      line-height: 1.6;
    }
    
    .heart-icon {
      text-align: right;
      font-size: 32rpx;
      margin-top: 10rpx;
      color: #ff3366;
    }
  }
}

.input-area {
  background-color: #fff;
  padding: 20rpx 24rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  
  .input-tools {
    display: flex;
    margin-right: 20rpx;
    
    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 24rpx;
      opacity: 0.8;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.9);
        opacity: 1;
      }
    }
  }
  
  .input-box {
    flex: 1;
    background-color: #f5f5f5;
    border-radius: 50rpx;
    padding: 16rpx 24rpx;
    min-height: 72rpx;
    max-height: 200rpx;
    overflow-y: auto;
    
    input {
      font-size: 30rpx;
      color: #333;
      line-height: 1.5;
    }
  }
  
  .send-btn-container {
    margin-left: 20rpx;
  }
  
  .send-btn {
    background-color: #ff6600;
    color: #fff;
    font-size: 28rpx;
    padding: 12rpx 32rpx;
    border-radius: 32rpx;
    transition: all 0.3s;
    
    &:active {
      background-color: #e55c00;
    }
    
    &.disabled {
      background-color: #ddd;
      color: #999;
    }
  }
}

.emoji-panel {
  position: absolute;
  bottom: 120rpx;
  left: 0;
  right: 0;
  height: 400rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  z-index: 90;
  
  .emoji-scroll {
    height: 100%;
  }
  
  .emoji-row {
    display: flex;
    // padding: 10rpx 20rpx;
  }
  
  .emoji-item {
    flex: 1;
    text-align: center;
    font-size: 48rpx;
    padding: 10rpx 0;
    transition: all 0.2s;
    
    &:active {
      transform: scale(1.2);
    }
  }
}

.love-letter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content {
    width: 80%;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    z-index: 1001;
    position: relative;
  }
  
  .modal-header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    image {
      width: 36rpx;
      height: 36rpx;
      opacity: 0.5;
    }
  }
  
  .letter-textarea {
    width: 100%;
    min-height: 300rpx;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
  
  .placeholder {
    color: #ccc;
  }
  
  .word-count {
    text-align: right;
    padding: 0 30rpx 20rpx;
    font-size: 24rpx;
    color: #999;
  }
  
  .modal-footer {
    display: flex;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #eee;
    
    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      margin: 0 10rpx;
      
      &::after {
        border: none;
      }
    }
    
    .cancel-btn {
      background-color: #f5f5f5;
      color: #666;
	  
    }
    
    .send-letter-btn {
      background-color: #ff6600;
      color: #fff;
    }
  }
}

.message-menu {
  position: fixed;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
  
  .menu-item {
    padding: 20rpx 40rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    
    &:active {
      background-color: #f5f5f5;
    }
  }
  
  .menu-triangle {
    position: absolute;
    bottom: -16rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16rpx solid transparent;
    border-right: 16rpx solid transparent;
    border-top: 16rpx solid #fff;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.message-item {
  animation: fadeIn 0.3s ease-out;
}

/* 响应式调整 */
@media (max-width: 400px) {
  .message-bubble {
    max-width: 60% !important;
  }
  
  .input-box {
    min-height: 60rpx !important;
  }
}
</style>